/*
* @Author: wangliang
* @Date: 2018/4/11
* @description: 机构信息
*/
<template>
    <div>
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>机构基本信息
                <span class="m-l-20">最后更新时间：{{modifyTime | cmsMoment}}</span>
                <el-button type="primary" size="mini" round class="m-l-20" @click="save(true)">保存</el-button>
            </h3>
        </el-row>
        <el-form class="custom-box p-20" :model="comOrg" :rules="rules" ref="OrgForm">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="机构类型" label-width="140px" prop="checkList">
                        <el-checkbox-group v-model="checkList" @change="tabControl">
                            <el-checkbox v-for="(item, index) in dropDown.orgType" :key="index" :label="item.dictValue">{{item.dictName}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="资本来源" label-width="140px">
                        <el-select v-model="comOrg.source" placeholder="请选择">
                            <el-option
                            v-for="(item, index) in dropDown.capitalFromType"
                            :key="index"
                            :label="item.dictName"
                            :value="Number(item.dictValue)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="管理基金总额" label-width="140px">
                                <el-input type="number" v-model="comOrg.totalFund">
                                    <template slot="append">万</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="币种" label-width="50px">
                                <el-select v-model="comOrg.totalFundCurrency" placeholder="请选择">
                                    <el-option
                                    v-for="(item, index) in dropDown.currencyType"
                                    :key="index"
                                    :label="item.dictName"
                                    :value="Number(item.dictValue)">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="是否基金业协会备案" label-width="150px" prop="society">
                                <el-select v-model="comOrg.society" placeholder="请选择" style="width:100%;" @change="choose">
                                    <el-option
                                    v-for="(item, index) in dropDown.whether"
                                    :key="index"
                                    :label="item.dictName"
                                    :value="Number(item.dictValue)">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="策略描述" label-width="140px">
                        <el-input type="textarea" v-model="comOrg.description" :rows="4" resize="none"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <IndustryTag :industryList="industryList" ref="industryList" @setCvIndustryChange="setCvIndustryChange" @industryPass='industryPass'/>
                    <Tag :comTagDtoList="comTagDtoList" :cvIndustryValue="cvIndustryValue" @tagPass='tagPass' ref="tag" />
                </el-col>
            </el-row>    
        </el-form>
        <div v-if="showOther">
            <ManagementFund
            :type="2"
            :itemId="id"
            :itemType="2"
            class="m-t-20"
            />
            <ExecutiveTeam></ExecutiveTeam>
        </div>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import ExecutiveTeam from './management-fund.vue';
import ManagementFund from '../../../../../components/management-team/index.vue';
import { ComOrgDto, ComOrgTypeDto, ComIndustryDto, ComTagDto } from '../../../../../api/Interface';
import OrgService from '../../../../../service/subject/company/mechanism-info/index';
import IndustryTag from '../../../../../components/industry-tag/index.vue';
import Tag from '../../../../../components/cms-tag/index.vue';
@Component({
  components: {
      ExecutiveTeam, // 高管团队
      ManagementFund, // 管理基金
      IndustryTag, // 行业标签
      Tag, // 标签
  }
})
export default class BasicInfo extends Vue {
    // 初始化数据 相当于data
    public comOrg: ComOrgDto = {} as ComOrgDto; // <PersonVo> {}
    public id: number = 0; // 判断添加还是修改
    public OrgType: boolean; // 机构类型
    public modifyTime: number = (new Date()).valueOf();
    public tabIndex: number = 0;
    public inputValue: string = '';
    public tags: boolean;
    public checkList: string[] = [];
    public industryList: ComIndustryDto[] = []; // 行业信息
    // 标签 列表
    public comTagDtoList: ComTagDto[] = [];
    public organizationList: ComOrgTypeDto[] = []; // 机构类型
    public showOther: boolean = false; // 显示高管和基金
    public dropDown: object = {
        orgType: this.$store.state.user.dictionary.dicList.orgType, // 机构类型
        capitalFromType: this.$store.state.user.dictionary.dicList.capitalFromType, // 资本来源
        currencyType: this.$store.state.user.dictionary.dicList.currencyType, // 币种
        whether: this.$store.state.user.dictionary.dicList.whether, // 是否
    };
    public rules = {
        checkList: [
            { required: true, validator: this.validatePass, message: '请选择机构类型', trigger: 'change' }
        ],
        society: [
            { required: true, message: '请选择是否基金业协会备案', trigger: 'change' },
        ],
    };
    public cvIndustryValue: string[] = [];
    public disabledList: boolean[] = [];
    // refs
    public $refs: {
        OrgForm: HTMLFormElement,
        industryList: any,
        tag: any
    };

    // watch
    @Watch('OrgType')
    public onChildChanged(val: string, oldVal: string) {
        // console.log(this.OrgType, 'aa');
    }

    // 声明周期钩子
    public mounted() {
        // this.getOrgInfo();
    }

    // 方法
    // cv行业设置
    public setCvIndustryChange(valList: string[]) {
        this.cvIndustryValue = valList;
    }

    // 保存
    public save(showBool: boolean) {
        // 处理机构类型
        this.organizationChange();
        this.$refs.OrgForm.validate( async ( valid: boolean) => {
            if (valid) {
                // 验证投资行业是否 有值
                const industryListValid = await this.$refs.industryList.checkInput();
                if (!industryListValid) {
                    this.$message.error('请完善信息');
                    return;
                }
                // 验证投资标签是否 有值
                const tagValid = await this.$refs.tag.checkInput();
                if (!tagValid) {
                    this.$message.error('请完善信息');
                    return;
                }
                const tagList = await this.$refs.tag.getTagList();
                this.comOrg.comOrgTypeList = this.organizationList;
                this.comOrg.industryList = this.industryList;
                this.comOrg.tagList = tagList;
                if (this.id === 0 || this.id === null ) { // 添加
                    this.comOrg.companyId = Number(this.$route.params.itemId);
                    const res = await OrgService.saveComOrg(this.comOrg);
                    if (res.resCode === '0') {
                        if (showBool) {
                            this.$message.success('添加成功');
                        }
                        this.getOrgInfo();
                    }
                } else { // 修改
                    this.comOrg.companyId = Number(this.$route.params.itemId);
                    this.comOrg.id = this.id;
                    const res = await OrgService.updateComOrg(this.comOrg);
                    if (res.resCode === '0') {
                        if (showBool) {
                            this.$message.success('修改成功');
                        }
                        this.getOrgInfo();
                    }
                }
            } else {
                this.$message.error('请完善信息');
            }
        });
    }
    // 获取机构信息
    public async getOrgInfo() {
        const res = await OrgService.getComOrg({companyId: Number(this.$route.params.itemId)});
        if (res.resCode === '0') {
            this.comOrg = res.data;
            this.industryList = this.comOrg.industryList;
            this.modifyTime = res.data.modifyTime;
            this.checkList = [];
            if (res.data.comOrgTypeList.length > 0) {
                this.OrgType = true;
                res.data.comOrgTypeList.map( (item: ComOrgTypeDto ) => {
                    if (this.checkList.indexOf(item.orgType.toString()) < 0) {
                        this.checkList.push(item.orgType.toString());
                    }
                });
            }
            this.OrgType = false;
            this.id = res.data.id;
            if (this.id === null) {
                this.showOther = false;
            }
            if (this.id !== 0 && this.id !== null) {
                this.showOther = true;
            }
            // 获取标签列表
            this.comTagDtoList = res.data.tagList;
            this.comOrg.tagList = res.data.tagList;
            // 控制tab
            if (res.data.comOrgTypeList.length <= 0 || !res.data.society || res.data.industryList.length <= 0 || res.data.tagList.length <= 0) {
                this.$emit('OrgValidate', false);
            } else {
                this.$emit('OrgValidate', true);
            }
            res.data.comOrgTypeList.length === 0 ? this.disabledList[0] = false : this.disabledList[0] = true; // 机构类型
            res.data.society ? this.disabledList[1] = true : this.disabledList[1] = false; // 是否备案
            res.data.industryList.length === 0 ? this.disabledList[2] = false : this.disabledList[2] = true; // 行业信息
            res.data.tagList.length === 0 ? this.disabledList[3] = false : this.disabledList[3] = true; // 标签
            if (!this.disabledList[2]) {
                // 验证投资行业是否 有值
                const industryListValid = await this.$refs.industryList.checkInput();
                if (!industryListValid) {
                    return;
                }
            }
            if (!this.disabledList[3]) {
                // 验证投资标签是否 有值
                const tagValid = await this.$refs.tag.checkInput();
                if (!tagValid) {
                    return;
                }
            }
        }
    }
    // 机构类型转换
    public organizationChange() {
        this.checkList.map( (item: string) => {
            this.organizationList.push({
                orgType: Number(item),
                companyId: Number(this.$route.params.itemId),
                id: 0,
                orgId: 0,
            });
        });
    }
    // 控制tab
    public tabControl() {
        if (this.checkList.length > 0) {
            this.disabledList[0] = true;
        } else {
            this.disabledList[0] = false;
        }
        this.testNotice();
    }
    // 标签验证
    public tagPass(bool: boolean) {
        this.disabledList[3] = bool;
        this.testNotice();
    }
    // 行业验证
    public industryPass(bool: boolean) {
        this.disabledList[2] = bool;
        this.testNotice();
    }
    // 是否备案
    public choose() {
        if (this.comOrg.society) {
            this.disabledList[1] = true;
        } else {
            this.disabledList[1] = false;
        }
        this.testNotice();
    }
    // 验证通知
    public testNotice() {
        if (this.disabledList.indexOf(false) >= 0) {
            this.$emit('OrgValidate', false);
        } else {
            this.$emit('OrgValidate', true);
        }
    }
    // 校验
    public validatePass(rule: object, value: string[], callback: (obj ?: object) => void) {
        value = this.checkList;
        if (value && value.length === 0) {
          callback(new Error('请选择'));
        } else {
            callback();
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ca-title {
    height: 36px;
    overflow: hidden;
}
.ca-title h3{
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
}
.line-h {
    line-height: 36px;
}
.addBtn {
    font-size: 20px;
    margin-top: 12px;
}
.el-checkbox+.el-checkbox {
    margin-right: 10px;
}
.el-checkbox {
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
.minheight{
  height: 150px;
  overflow-y: auto;
  padding: 0 10px;
  border-radius: 5px;
}
.ca-box {
    background: #fff;
    border: #dbe3ea 1px solid;
}
</style>